<template>
  <div class="box1">
    <p style="font-size: 10px;">最受好评电影</p>
    <div class="box2">
        <ul>
          <li v-for="(item,index) in pm"
          :key="index"
          @click="tiao(item.movieId)"
          >
              <div class="box3">
                <div class="tu">
                  <img :src="item.poster" alt="">   
                   <div class="pinFen">观众评分{{item.score}}</div>
                </div>
                <p>
                   {{item.name}}
                </p>
              </div>
             
          </li>
        </ul>
        <div>
          <liao-biao :rm="rm"></liao-biao>
        </div>
        <div class="boo"></div>
    </div>
  </div>
</template>
<script>
import liaoBiao from'../components/homeCom/tabs1LiaoBiao.vue';
export default {
  components:{
    liaoBiao,
  },  
  props:{
    pm:{
      typeof:Array
    },
    rm:{
      typeof:Array
    }
  },
  methods:{
    tiao(a){
      // console.log(a);
      this.$router.push({name:'XiangQing',params:{id:a}})
      // console.log(a);



    }
    
  },
  created(){
    // console.log(this.pm);
  }
}
</script>
<style lang="less" scoped>
  .box1{
    .boo{
      height: 50px; 
    }
    .box2{
      ul{
        &::-webkit-scrollbar {
                     display: none;
                   }
        display: flex;
        overflow-x: auto;
        li{
          display: flex;
          width: 80px;
          height: 130px;
          margin: 10px 10px;
          // float: left;
          // white-space: nowrap;
          
          .box3{
            width:100%;
            height: 100%;

            .tu{
              position: relative;
              .pinFen{
                font-size: 10px;
                  width: 100%;
                  height: 20px;
                  background-color: rgba(0, 9, 0, 0.5);
                  position: absolute;
                  bottom: 5px;
                  left: 0;
                  color: #FAAF00;
                  font-weight: 900;
                }
              img{
                width: 80px;
                height: 100px;
  
                
              }
            }
            p{
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 15px;
            }
            
          }
          
        }
      }
    }

  }
</style>